<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>2048游戏之陈小发</title>
    <link rel="stylesheet" type="text/css" href="/static/2048res/style.css?123" />
    <script src="/static/2048res/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="/static/2048res/animation.js" type="text/javascript"></script>
    <script src="/static/2048res/support.js?12324" type="text/javascript"></script>
    <script src="/static/2048res/main.js" type="text/javascript"></script>
</head>

<body>
    <div class="header">
        <div class="cell"> <a href="javascript:;" onclick="newGame();" id="newGame">重玩</a>
        </div>
        <div class="cell" style="width:40%;">
            <div id="topScore">最高分数</br><span id="top_score">0</span></div>
        </div>
        <div class="cell" style="width:40%;">
            <div id="currentScore">当前得分</br><span id="score">0</span></div>
        </div>
    </div>
    <div id="outer">
        <div id="grid-container">
            <div class="grid-cell" id="grid-cell-00"></div>
            <div class="grid-cell" id="grid-cell-01"></div>
            <div class="grid-cell" id="grid-cell-02"></div>
            <div class="grid-cell" id="grid-cell-03"></div>
            <div class="grid-cell" id="grid-cell-10"></div>
            <div class="grid-cell" id="grid-cell-11"></div>
            <div class="grid-cell" id="grid-cell-12"></div>
            <div class="grid-cell" id="grid-cell-13"></div>
            <div class="grid-cell" id="grid-cell-20"></div>
            <div class="grid-cell" id="grid-cell-21"></div>
            <div class="grid-cell" id="grid-cell-22"></div>
            <div class="grid-cell" id="grid-cell-23"></div>
            <div class="grid-cell" id="grid-cell-30"></div>
            <div class="grid-cell" id="grid-cell-31"></div>
            <div class="grid-cell" id="grid-cell-32"></div>
            <div class="grid-cell" id="grid-cell-33"></div>
        </div>
    </div>

    <script>
        var startX, //触摸时的坐标   
            startY,
            x, //滑动的距离   
            y,
            aboveY = 0; // 设一个全局变量记录上一次内部块滑动的位置   
        var documentHeight = $("#grid-container").height(); //内部滑动模块的高度   
        // var wapperHeight = $("#outer").height(); //外部框架的高度   
        // console.log(documentHeight);

        var inner = document.getElementById("grid-container");

        function touchStart(e) { //触摸开始   
            e.preventDefault();
            var touch = e.touches[0];
            startX = touch.pageX; //刚触摸时的坐标
            startY = touch.pageY; //刚触摸时的坐标
        }

        function touchMove(e) { //滑动   
            e.preventDefault();
            var touch = e.touches[0];
            x = touch.pageX - startX; //滑动的距离      
            y = touch.pageY - startY; //滑动的距离      
        }

        function touchEnd(e) { //手指离开屏幕
            // console.log(x);
            // console.log(y);
            var xy = Math.abs(x) - Math.abs(y);
            var d = 0;
            if (xy > 0) {
                if (x >= 0) {
                    d = 3;
                } else {
                    d = 1;
                }
            } else {
                if (y >= 0) {
                    d = 4;
                } else {
                    d = 2;
                }
            }

            slideDirection(d);
        }

        document.getElementById("outer").addEventListener('touchstart', touchStart, false);
        document.getElementById("outer").addEventListener('touchmove', touchMove, false);
        document.getElementById("outer").addEventListener('touchend', touchEnd, false);
    </script>

    <div class="footer">
        <hr />
        <p>Develop by <span style="color: crimson;"> {$Think.config.email} </span></p>
        <ul>
            <li> jQuery实现的2048游戏之陈小发 </li>
            <li> 源文件来自: <a href="https://gitee.com/lcore/2048" target="_blank">Kiritor</a> </li>
            <li> 修改后源文件: <a href="https://gitee.com/huwhois001/2048_of_chen_xiaofa"
                    target="_blank">2048_of_chen_xiaofa</a> </li>
            <li> 个人博客地址:<a href="{$Think.config.url_blog_root}" target="_blank" title"huwhois的博客">huwhois的博客</a> </li>
            <div>
            </div>
</body>

</html>